<template>
  <div class="Shopping_cart">
    <Header></Header>
    <div class="main">
      <div class="product">
        <div class="product_title">Все товары (7)</div>
        <div>
          <div style="margin-top: 30px;display: flex;align-items: center">
            <el-radio-group v-model="radio">
              <el-radio value="1" size="large">
                <p class="text_style">Bce</p>
              </el-radio>
            </el-radio-group>
            <el-button class="mLeft20 text_style product_btn">Коллекция</el-button>
            <el-button class="text_style product_btn">Удалить</el-button>
          </div>
        </div>
        <Shopping_list @getPosition="getPositionFun"></Shopping_list>
        <el-empty v-if="state.noDataState">
          <template #description>
            <div class="noHave_data">Пока нет товаров, чтобы добавить в корзину покупок, быстро выбирайте</div>
          </template>
          <template #image>
            <img class="noHave_data_img" src="/src/assets/image/kongData.png" alt="">
          </template>
        </el-empty>
        <div class="settle between" v-if="!state.noDataState">
          <div>
            <div class="items">
              <el-radio-group v-model="radio">
                <el-radio value="1" size="large">
                  <p class="text_style">Bse</p>
                </el-radio>
              </el-radio-group>
              <div class="settle_type_num items">
                <p class="color_text_1">2</p>
                <p class="color_text_2">Виды товаров</p>
              </div>
            </div>
          </div>
          <div class="items">
            <div class="allMoney content_end">
              <div class="allMoney_style_1">Итого:</div>
              <div class="allMoney_style_2">796.00₽</div>
            </div>
            <el-button class="allMoney_btn" @click="$router.push('/Order_details')">Расчеты (2)</el-button>
          </div>
        </div>
      </div>
      <div class="Product_list">
        <div class="title">Рекомендуемые продукты</div>
        <Product_list></Product_list>
      </div>
    </div>


    <div class="typePopup" v-if="state.typePopup.top !== 0 && state.typePopupShow" :style="{'top':state.typePopup.top+'px',left:state.typePopup.left+'px'}">
      <div class="content">
        <div class="goodImg">
          <img class="goodsImg" src="/src/assets/image/goodscs.png" alt="">
        </div>
        <div class="goodType">
          <div class="typeList" v-for="index of 4">
            <div class="title">размер</div>
            <div class="titleList">
              <div v-for="index of 4" :class="index === 1 ? 'titleItem-action':'titleItem'">M</div>
            </div>
          </div>
        </div>
      </div>
      <div class="btnBox">
        <div class="btnBox_btn1">Определение</div>
        <div class="btnBox_btn2" @click="state.typePopupShow = false">Отменить</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="cart" setup>
import {ref, reactive, defineAsyncComponent} from "vue";
const Product_list = defineAsyncComponent(() => import('/src/components/Product_list/Product_list.vue'))
let radio = ref(false)
const state = reactive({
  typePopup:{
    top:0,
    left:0
  },
  typePopupShow:false,
  noDataState:false
})
const getPositionFun = (globalY:any, globalX:any) => {
  console.log(globalY, globalX)
  state.typePopupShow = true
  state.typePopup.top = globalY + 96
  state.typePopup.left = globalX
}
</script>
<script lang="ts">
import Header from '@/components/Header/Header.vue';//引入的头部的主键
import Shopping_list from '@/components/Shopping_list/Shopping_list.vue';//引入的头部的主键

export default {
  name: 'Login',
  components: {
    Header,
    Shopping_list
  }
}
</script>

<style lang="less" scoped>

.Shopping_cart{
  position: relative;
}
:deep(.el-radio__inner){
  width: 20px !important;
  height: 20px !important;
}
:deep(.el-radio__inner::after){
  width: 7px !important;
  height: 7px !important;
}
:deep(.el-radio__label){
  margin-left: 20px;
}
:deep(.el-empty__image){
  width: auto;
}
.noHave_data{
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #999999;
  line-height: 17px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.noHave_data_img{
  width: 600px;
  height: 300px;
}
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #F6F6F6;

  .product {
    width: 1320px;
    border-radius: 16px;
    background: #FFFFFF;
    margin-top: 16px;
    padding: 40px;
    //max-height: 1000px;
    //overflow: auto;
    .product_title {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 600;
      line-height: 19.2px;
      text-align: left;
      color: #333333;
    }

    .product_btn {
      width: Hug (107px)px;
      height: Fixed (32px)px;
      padding: 2px 12px 2px 12px;
      border-radius: 8px;
      border: 1px solid #CCCCCC
    }

    .text_style {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 500;
      line-height: 16px;
      text-align: left;
      color: #333333;
    }

    .noHave_data {
      width: 1320px;
      height: auto;
      margin-top: 10px;

      .noHave_data_img {
        width: 600px;
        height: 300px;
      }

      .noHave_data_title {
        width: 320px;
        height: 34px;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 16.8px;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #999999;
      }
    }





    .allMoney_btn {
      width: 300px !important;
      height: 60px !important;
      padding: 10px 12px 10px 12px;
      border-radius: 16px;
      background: #0070E9 ;
      margin-left: 50px;
      font-family: PingFang SC;
      font-size: 20px;
      font-weight: 400;
      line-height: 20px;
      text-align: center;
      color: #FFFFFF;
    }

    .settle {
      width: 1280px;
      height: 60px;
      border-radius: 16px;
      background: #F6F6F6;
      border: 1px solid #CCCCCC;
      padding: 20px;
      margin-top: 40px;


      .settle_type_num {
        margin-left: 60px;
        font-family: PingFang SC;
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
        text-align: left;

        .color_text_1 {
          color: #FF831F;
        }

        .color_text_2 {
          color: #333333;
          margin-left: 4px;
        }
      }
    }
  }
  .Product_list{
    width: 1400px;
    .title{
      margin-top: 40px;
      margin-bottom: 40px;
      font-family: Segoe UI, Segoe UI;
      font-weight: bold;
      font-size: 24px;
      color: #333333;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}
.typePopup{
  position: absolute;
  width: 666px;
  height: 309px;
  background: #FFFFFF;
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
  border-radius: 16px 16px 16px 16px;
  z-index: 999999;
  box-sizing: border-box;
  padding: 20px;
  .content{
    display: flex;
    .goodImg{
      width: 200px;
      height: 200px;
      background-color: #2C5AA7;
      border-radius: 4px;
      overflow: hidden;
      margin-right: 20px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .goodType{
      flex: 1;
      //background-color: #2C5AA7;
      border-bottom: 1px solid #EEEEEE;
      overflow: auto;
      height: 200px;
      .typeList{
        font-family: Segoe UI, Segoe UI;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
        line-height: 16px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 20px;
        .title{
          margin-bottom: 12px;
        }
        .titleList{
          display: flex;
          .titleItem{
            padding: 10px 14px;
            background-color: #F6F6F6 ;
            border-radius: 4px;
            font-weight: 500;
          }
          .titleItem-action{
            padding: 10px 14px;
            background-color: #0070E9 ;
            border-radius: 4px;
            color: white;
            font-weight: 500;
          }
        }
        .titleList>*{
          margin-right: 16px;
        }
      }
    }
  }
  .btnBox{
    display: flex;
    margin-left: 220px;
    margin-top: 20px;
    .btnBox_btn1{
      width: 140px;
      height: 48px;
      background: #0070E9;
      border-radius: 8px 8px 8px 8px;
      margin-right: 16px;
      font-family: Segoe UI, Segoe UI;
      font-weight: 600;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 45px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      cursor: pointer;
    }
    .btnBox_btn2{
      width: 140px;
      height: 48px;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #CCCCCC;
      font-family: Segoe UI, Segoe UI;
      font-weight: 600;
      font-size: 16px;
      color: #333333;
      line-height: 48px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      cursor: pointer;
    }
  }
}
</style>
